<template>
	<div class="view">
		 <Modal 
        		v-model="data.isShow"
        		width="400">
        		<p slot="header">
	            <span>{{data.actionType == 1 ? '新建' : '编辑'}}职业属性</span>
	        </p>
			<Form ref="form" 
				:model="data.data" 
				:rules="ruleValidate" 
				:label-width="80">
		        <Form-item 
		        		label="名称" 
		        		prop="name" 
		        		style="width: 300px;">
		            <Input 
		            		type="text" 
		            		v-model="data.data.name"
		            		autofocus>
		            </Input>
		        </Form-item>
		        <Form-item 
		        		label="分组名称" 
		        		prop="groupId" 
		        		style="width: 300px;"
		        		v-if="data.data.type == 1">
		            <Select v-model="data.data.groupId"
		            	:disabled="data.actionType == 1"
		            	@on-change="change2Group">
				        <Option 
				        		v-for="item in groups" 
				        		v-if="item.type == 1"
				        		:value="item.gid"
				        		:key="item.gid">{{ item.name }}</Option>
				    </Select>
		        </Form-item>
		        
		        <Form-item 
		        		label="背景颜色" 
		        		style="width: 300px;">
		        		<div class="color-item">
		        			<colorPicker 
		        				v-model="data.data.bgColor" 
		        				:defaultColor="data.data.bgColor"
		        				style="border: 1px solid #E1E7E9;">
		        			</colorPicker>
		        			<Input 
			        			class="color-val"
			            		type="text" 
			            		size="small"
			            		v-model="data.data.bgColor">
			            </Input>
		        		</div>
		        </Form-item>
		        
		        <Form-item 
		        		label="字体颜色" 
		        		style="width: 300px;">
		        		<div class="color-item">
			        		<colorPicker 
			        			v-model="data.data.textColor" 
			        			:defaultColor="data.data.textColor"
			        			style="border: 1px solid #E1E7E9;">
			        		</colorPicker>
			        		<Input 
			        			class="color-val"
			            		type="text" 
			            		size="small"
			            		v-model="data.data.textColor">
			            </Input>
		        		</div>
		        </Form-item>
		        
		        <Form-item 
		        		label="实例">
		            <span class="label-item" v-text="data.data.name"
		            	v-bind:style="{'background-color':data.data.bgColor, 
		            	'color': data.data.textColor, 
		            	'border':'1px solid '+ data.data.strokeColor}"></span>
		        </Form-item>
		    </Form>
		    <div slot="footer">
		    		<div class="btns">
			    		<div>
			    			<Button type="error" 
			           		v-if="data.actionType == 2 && data.data.type == 1"
			           		:disabled="data.isSubmit" 
			           		@click="handleDel()">
			           		删除
			           	</Button>
			    		</div>
			    		<div class="btns-right">
			           	<Button type="primary" 
			           		:loading="data.isSubmit" 
			           		@click="handleSubmit('form')">
			           		确定
			           	</Button>
			            <Button type="ghost" 
			            		:disabled="data.isSubmit" 
			            		@click="handleCancel('form')" 
			            		style="margin-left: 8px">
			            		关闭
			            </Button>
		            	</div>
	            	</div>
	        </div>
	     </Modal>
	</div>

</template>

<script>
	export default {
		props: ['data', 'groups'],
		components: {},
		data() {
			return {
				ruleValidate: {
                    name: [
                        { required: true, message: '属性名称不能为空', trigger: 'blur' },
                        { required: true, message: '属性名称不能为空', trigger: 'focus' },
                        { required: true, message: '属性名称不能为空', trigger: 'change' }
                    ],
                    groupId: [
                        { required: true, type:'integer', message: '分组不能为空', trigger: 'blur' }
                    ]
                }
			}
		},
		mounted: function() {
		},
		methods: {
			change2Group(val) {
				var $this = this;
				var form = this.data;
				var group = form.group;
				var nGroup = form.nGroup;
				if(val == group.data.gid) {//一个分组下
					nGroup.data = null;
					nGroup.gindex = 0;
				} else {
					//寻找分组
					for(var i=0; i<$this.groups.length; i++) {
						var temp = $this.groups[i];
						if(val == temp.gid) {
							nGroup.data = temp;
							nGroup.gindex = i;
							return;
						}
					}
				}
			},
			handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    		this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            handleCancel (name) {
              	this.data.isShow = false;
            },
			handleDel() {
				this.$emit('on-del', this.data);
			}
		},
		watch: {
			'data.data.textColor'(val) {
				var $this = this;
	        		if(val == "#fff") {
	        			$this.data.data.textColor = '#FFFFFF';
	        		} else if(val == '#000') {
	        			$this.data.data.textColor = '#000000';
	        		}
	        },
	        'data.data.bgColor'(val) {
				var $this = this;
	        		if(val == "#fff") {
	        			$this.data.data.bgColor = '#FFFFFF';
	        		} else if(val == '#000') {
	        			$this.data.data.bgColor = '#000000';
	        		}
	        }
		}
	}
</script>

<style scoped="scoped">
	.view {
		padding: 20px;
	}
	.color-item {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
	}
	.color-val {
		margin-left: 10px;
	}
	.label-item {
		border-radius: 3px;
		padding: 2px 5px;
	}
	.btns {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	.btns-right {
		flex: 1;
	}
</style>

<style>
	.m-colorPicker .box{
		z-index: 999;
	}
</style>